<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="resources/css/stylemain.css">
<link rel="stylesheet" href="resources/layui/css/layui.css">
<link rel="stylesheet" href="resources/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

</head>
<body>
<div class="layui-col-md12">
   <div class="layui-card">
       <div class="layui-card-header">
            <form class="layui-form" action="">
            	<div class="layui-form-item">
				    <div class="layui-input-block">
				      <input id="finger_1" type="radio" name="fingerprint" value="1" title="指纹一" checked="true">
				      <input id="finger_2" type="radio" name="fingerprint" value="2" title="指纹二">
				      <input id="finger_3" type="radio" name="fingerprint" value="3" title="指纹三">
				    </div>
				</div>
       		</form>
       
       </div>
       <!-- Unnamed (矩形) -->
      <div id="u50" class="ax_default box_1">
        <div id="u50_div" class=""></div>
      </div>

      <!-- Unnamed (椭圆形) -->
      <div id="u51" class="ax_default ellipse">
        <img id="u51_img" class="img " src="resources/images/u51.png"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u52" class="ax_default _图片">
        <img id="u52_img" class="img " src="resources/images/u52.gif"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u53" class="ax_default label">
        <div id="u53_div" class=""></div>
        <div id="u53_text" class="text ">
          <p><span>请将手指按压在采集区域内进行采集，提示成功后抬起</span></p>
        </div>
      </div>

      <div id="u125" class="ax_default primary_button">
        <div id="u125_div" class=""></div>
        <div id="u125_text" class="text " style="top: 12px; transform-origin: 68px 8px 0px;">
          <p><span>图像采集</span></p>
        </div>
      </div>
      <div id="u90" class="ax_default" style="display:none">
        <img id="u90_img" class="img " src="resources/images/u81.png">
      </div>
      <div id="u89" class="ax_default" style="display:none">
        <img id="u89_img" class="img " src="resources/images/u71.png">
      </div>
      <div id="u88" class="ax_default" style="display:none">
        <img id="u88_img" class="img " src="resources/images/u70.png">
      </div>
      <div id="u91" class="ax_default" style="display:none">
        <img id="u91_img" class="img " src="resources/images/u91.png">
      </div>
   </div>
</div>
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script src="resources/layui/layui.all.js"></script>

<script type="text/javascript">
var form = layui.form;
var t1;
var isrunning = 0;
var tflag = 10;
var _username = "";
layui.use([], function(){
	
	form.render();
});

document.getElementById("u125").onclick = function(){
	if(isrunning == 1){
		return;
	}
	//连接指纹采集仪
	var res = httpOpenDev();
	if(res.code == 200){
		t1 = window.setInterval(function() {
			httpStoreTemplate();
		},500);
	}else{
		isrunning = 0;
		layer.msg("连接采集仪失败:" + res.code, {icon: 2,time: 2000});
	}
	
}

function child(username){
	debugger;
	_username = username;

}

function httpStoreTemplate() {
    $.ajax({
    	crossDomain:true,
        url:"https://127.0.0.1:8918/syno/api/template/group/base64encoder",
        method:"get",
        dataType: "json",
        success:function(result) {
            if(result.code == 200){            	
            	tflag = 10;
            	window.clearInterval(t1); 
            	httpButtonStatus(0);
            	uploadfinger(result.data);
            	
            	return;
            }
            tflag--;
            if(tflag == 0){        	
            	tflag = 10;
            	window.clearInterval(t1); 
            	httpButtonStatus(0);
            	layer.msg("采集超时，请重新采集!", {icon: 7,time: 2000});
            }
        },
        erro:function(e){        	
        	tflag = 10;
        	window.clearInterval(t1);
        	httpButtonStatus(0);
        	layer.msg(e, {icon: 2,time: 2000});
        	return;
        }
        
    });
}

function httpButtonStatus(flag){
	if(flag == "1"){
		isrunning = 1;
		$("#u125_div").css("background-color","rgba(228, 228, 228, 1)");
		$("#u88").css("display","");
		$("#u89").css("display","");
		$("#u90").css("display","");
		$("#u91").css("display","");
	}else{
		isrunning = 0;
		$("#u125_div").css("background-color","rgba(22, 155, 213, 1)");
		$("#u88").css("display","none");
		$("#u89").css("display","none");
		$("#u90").css("display","none");
		$("#u91").css("display","none");
		httpCloseDev();
	}
}

function uploadfinger(finger){
	var datastring = '{"username":"' + _username + '","fingerindex":"' + $("input[name='fingerprint']:checked").val() + '","finger":"' + finger + '","rname":"智能锁管理/用户管理/采集指纹","ckname":"","ckpassword":""}';
	layer.msg(finger);
	
	/*$.ajax({
		type:"post",
		contentType: "application/json;charset=UTF-8",
		url: "fingerprint.do?",
		data:datastring,
		async:false,
     	dataType:"json",
        success: function(msg) {    //数据提交成功时返回数据
        	//debugger;
        	if(msg.status == "1"){
        		
			}else{
				layer.msg(msg.desc);
			}	
        	
        }

	});*/
	layer.msg("采集成功!", {icon: 6,time: 2000});
}

function httpOpenDev() {
    var response="";
    $.ajax({
    	crossDomain:true,
        url:"https://127.0.0.1:8918/syno/api/usb",
        method:"post",
        dataType: "json",
        async:false,
        success:function(result) {
            response=result;
        },
        complete:function(){
            if(response.code==200){
                httpButtonStatus(1);
            }
        },
        erro:function(e){
            response=e;
        }
    });
    return response;
}

function httpCloseDev() {
    $.ajax({
    	crossDomain:true,
        url:"https://127.0.0.1:8918/syno/api/close",
        method:"post",
        dataType: "json",
        success:function(result) {
            response=result;
        },
        complete:function(){
            if(response.code==200){
                httpButtonStatus(0);
            }
        },
        erro:function(e){
        	layer.msg(e, {icon: 2,time: 2000});
        }
    });
}
</script>
</body>
</html>
